<template>
  <a-card :bordered="false" :body-style="{ padding: '8px' }" class="card">
    <a-flex :align="'center'" gap="small">
      <Icon :component="h(icon)" style="font-size: 64px" />
      <a-flex style="flex: 1" vertical>
        <a-flex justify="space-between">
          <a-space>
            <a-typography-text
              class="title"
              :ellipsis="{ tooltip: task.name }"
              :content="task.name"
              @click="goDetail"
            />
            <a-tag :color="tag.color" :bordered="false">
              {{ tag.content }}
            </a-tag>
          </a-space>
          <a-space
            style="font-size: 10pt"
            :align="'center'"
            v-if="task.status === Status.Active"
          >
            <span>CN:{{ task.connections }}</span>
            <span>UL:{{ speed }}</span>
          </a-space>
        </a-flex>
        <a-progress :percent="percent" style="margin: 0" />
      </a-flex>
      <a-space :align="'center'">
        <a-button
          v-if="task.status === Status.Active"
          style="color: #d4b106"
          shape="circle"
          type="text"
          :icon="h(PauseOutlined)"
          @click="onPause"
        />
        <a-button
          v-if="task.status === Status.Pause"
          style="color: #389e0d"
          shape="circle"
          type="text"
          :icon="h(CaretRightOutlined)"
          @click="onStart"
        />
        <a-popconfirm
          title="是否删除该下载任务?"
          ok-text="是"
          cancel-text="否"
          @confirm="onDelete"
        >
          <a-button
            style="color: #cf1322"
            shape="circle"
            type="text"
            :icon="h(CloseOutlined)"
          />
        </a-popconfirm>
      </a-space>
    </a-flex>
  </a-card>
</template>

<script setup lang="ts">
import { Status, useApisStore, type Task } from "@/stores/apis";
import { computed, h } from "vue";
import { getExIcon, getSpeed, getTaskTag } from "./task";
import { App } from "ant-design-vue";
import Icon, {
  CaretRightOutlined,
  CloseOutlined,
  PauseOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";

const { task } = defineProps<{ task: Task }>();
const emit = defineEmits(["after"]);
const { message } = App.useApp();
const apis = useApisStore();
const router = useRouter();
const icon = computed(() => getExIcon(task.name, task.mode));
const tag = computed(() => getTaskTag(task.status));
const percent = computed(() => {
  if (task.total_length == 0) {
    return 0;
  }
  return Math.floor((task.completed_length * 100) / task.total_length);
});
const speed = computed(() => getSpeed(task));

function onPause() {
  apis
    .pauseTask(task.id)
    .then((data) => {
      message.success(data);
      emit("after");
    })
    .catch((error) => message.error(error));
}

function onStart() {
  apis
    .startTask(task.id)
    .then((data) => {
      message.success(data);
      emit("after");
    })
    .catch((error) => message.error(error));
}

function onDelete() {
  apis
    .deleteTask(task.id)
    .then((data) => {
      message.success(data);
      emit("after");
    })
    .catch((error) => message.error(error));
}

function goDetail() {
  router.push({ name: "detail", params: { id: task.id } });
}
</script>

<style scoped>
.card {
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.3);
}

.title {
  max-width: 520px;
  cursor: pointer;
}
</style>
